---
title: Você conhece o estilo SVG?
---

Se você usa alguma ferramenta de análise estática em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela também pode verificar se você está referenciando variáveis não declaradas. A maioria dos SVGs que você encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.

A coloração básica pode ser feita definindo dois atributos no nó: `fill` e `stroke`. `fill` define a cor dentro do objeto e `stroke` define a cor da linha desenhada ao redor do objeto. Você pode usar os mesmos esquemas de nomenclatura de cores CSS que você usa em HTML, independentemente de serem nomes de cores (que é `red`), Valores RGB (que são `rgb(255,0,0)`), valores de Hex, valores RGBA, etc.

```html
<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />
```

O `fill="purple"` acima é um exemplo de um _atributo apresentacional_. Curiosamente, e ao contrário de estilos embutidos como `style="fill: purple"` que também é um atributo, os atributos de apresentação podem ser [sobrescritos pelo CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) definidos em uma folha de estilos. Daí se você fez algo como `svg { fill: blue; }` ele irá substituir o preenchimento roxo que foi definido.
